<template>
  <commonForm v-bind="$attrs" v-on="$listeners" :form="form" :fieldsList="fieldsList">
    <template #defaultValueObjectSlot>
      <memberDefault
        :isCheckbox="form.selectType === 2"
        :form="form"
        @show="filterWorkerList"
        :fixedMap="userMap"
        :dynamicList="dynamicList"
        :dynamicMap="dynamicMap"
        :fixedList="userList"
        :fieldType="form.fieldType"
        :value="form.defaultValueObject">
      </memberDefault>
    </template>
    <template #optionalScopeSlot>
      <optionalScope
        :isCheckbox="true"
        :tabs="tabs"
        :value="form.optionalScope">
      </optionalScope>
    </template>
  </commonForm>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import commonForm from '../baseComponents/commonForm.vue'
import memberDefault from '../baseComponents/memberDefault.vue'
import { CommonModule } from '@/store/modules/common'
import { busConfigStore } from '@/afterSales/views/config/serviceConfig/store/busConfigStore'
import optionalScope from '../../../../components/optionalScope.vue'
import { commonAction, handleData } from '@/utils/common'
@Component({
  components: {
    commonForm,
    memberDefault,
    optionalScope
  }
})
export default class App extends Vue {
  @Prop(Array) public fieldsList!: any
  @Prop(Object) public form!: any

  private get userList () {
    return (CommonModule as any).publicCache.userList.map(v => ({ name: `${v.agentName} 【${v.agentNumber}】`, _id: v._id }))
  }

  private get userMap () {
    return (CommonModule as any).publicCache.userListObj
  }

  private get dynamicMap () {
    const obj = {}
    this.dynamicList.forEach((item) => {
      obj[item.businessId] = item
    })
    return obj
  }

  // 初始化动态数据
  private get dynamicList () {
    return [
      { businessId: 'currentUser', name: '当前用户', class: 'select-line' }
    ]
  }

  private beforeMount () {
    if (!busConfigStore.serviceList.length) {
      commonAction({
        url: '/server-work/action/serviceGroup/listAll',
        method: 'post'
      }).then(res => {
        if (res.success) {
          handleData(res.data.serviceGroupList, 'service')
        }
      })
    }
    this.form.optionalScope = this.form.optionalScope || {
      dept: [],
      technology: [],
      diy: [],
      user: [],
      service: []
    }
  }

  private get tabs () {
    return [
      {
        name: '成员',
        type: 'user',
        list: this.userList,
        listMap: (CommonModule as any).publicCache.userListObj,
        defaultProps: { id: '_id', name: 'name' }
      },
      {
        name: '技能组',
        type: 'technology',
        list: (CommonModule as any).publicCache.queueList,
        listMap: (CommonModule as any).publicCache.queueListObj,
        defaultProps: { id: '_id', name: 'name' }
      },
      {
        name: '服务组',
        type: 'service',
        list: busConfigStore.serviceList,
        listMap: busConfigStore.serviceMap,
        defaultProps: { id: 'id', name: 'name' }
      },
      {
        name: '部门',
        type: 'dept',
        list: (CommonModule as any).publicCache.departmentTree?.tree || [],
        listMap: (CommonModule as any).publicCache.departmentListObj,
        defaultProps: {
          children: 'children',
          label: 'name',
          name: 'name',
          id: '_id'
        }
      },
      {
        name: '动态',
        type: 'diy',
        list: this.dynamicScopeList,
        listMap: this.dynamicScopeMap,
        defaultProps: { id: 'businessId', name: 'name' }
      }
    ]
  }

  private get dynamicScopeList () {
    return busConfigStore.list.filter((item) => {
      if ((item.fieldType === 'department') && item.businessId !== this.form.businessId) {
        return true
      }
    })
  }

  private get dynamicScopeMap () {
    const obj = {}
    this.dynamicScopeList.forEach((item) => {
      obj[item.businessId] = item
    })
    return obj
  }

  private mounted () {
    // 过滤掉已删除的数据
    this.tabs.map(({ type, listMap }) => {
      this.form.optionalScope[type] = this.form.optionalScope[type].filter((id) => {
        return listMap[id]
      })
    })
  }
}
</script>

<style lang="stylus" scoped>
</style>
